<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deck AI - AI Presentation Generator</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="Icon.png" type="image/png">
    <style>
        :root {
            --primary: #FF6B6B;
            --secondary: #4ECDC4;
            --accent: #FFE66D;
            --background: #F7FFF7;
            --text: #2D3047;
        }

        body {
            background-color: var(--background);
            font-family: 'Space Grotesk', sans-serif;
            color: var(--text);
            line-height: 1.6;
            margin: 0;
            padding: 20px;
        }

        .deck-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: white;
            border: 4px solid var(--text);
            box-shadow: 8px 8px 0 var(--text);
            transform: translate(-4px, -4px);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .deck-container:hover {
            transform: translate(0, 0);
            box-shadow: 4px 4px 0 var(--text);
        }

        .deck-header {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
            background: var(--accent);
            border: 4px solid var(--text);
            transform: rotate(-1deg);
        }

        .deck-header h1 {
            color: var(--text);
            font-size: 3.5em;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: -2px;
        }

        .deck-header p {
            color: var(--text);
            font-size: 1.4em;
            margin: 10px 0 0;
            font-weight: 500;
        }

        .deck-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }

        .feature-card {
            background: white;
            padding: 25px;
            border: 4px solid var(--text);
            box-shadow: 6px 6px 0 var(--text);
            transform: translate(-3px, -3px);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .feature-card:hover {
            transform: translate(0, 0);
            box-shadow: 3px 3px 0 var(--text);
        }

        .feature-card h3 {
            color: var(--primary);
            margin: 0 0 15px;
            font-size: 1.5em;
            text-transform: uppercase;
        }

        .feature-card p {
            color: var(--text);
            margin: 0;
            font-size: 1.1em;
        }

        .deck-usage {
            background: var(--secondary);
            padding: 30px;
            border: 4px solid var(--text);
            margin: 40px 0;
            transform: rotate(1deg);
        }

        .deck-usage h2 {
            color: var(--text);
            margin: 0 0 20px;
            font-size: 2em;
            text-transform: uppercase;
        }

        .usage-steps {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .usage-steps li {
            margin: 20px 0;
            padding-left: 40px;
            position: relative;
            font-size: 1.2em;
            font-weight: 500;
        }

        .usage-steps li:before {
            content: "→";
            position: absolute;
            left: 0;
            color: var(--text);
            font-size: 1.5em;
        }

        .deck-examples {
            margin: 40px 0;
        }

        .deck-examples h2 {
            color: var(--text);
            font-size: 2em;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        .example-card {
            background: white;
            padding: 25px;
            border: 4px solid var(--text);
            margin-bottom: 20px;
            box-shadow: 6px 6px 0 var(--text);
            transform: translate(-3px, -3px);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .example-card:hover {
            transform: translate(0, 0);
            box-shadow: 3px 3px 0 var(--text);
        }

        .example-card h3 {
            color: var(--primary);
            margin: 0 0 15px;
            font-size: 1.4em;
            text-transform: uppercase;
        }

        .example-card p {
            color: var(--text);
            margin: 0 0 15px;
            font-size: 1.1em;
        }

        .example-card code {
            background: var(--background);
            padding: 15px;
            border: 3px solid var(--text);
            display: block;
            margin: 10px 0;
            font-family: 'Space Grotesk', monospace;
            font-size: 1.1em;
            font-weight: 500;
        }

        @media (max-width: 600px) {
            .deck-container {
                padding: 15px;
                border-width: 3px;
            }

            .deck-header h1 {
                font-size: 2.5em;
            }

            .deck-header p {
                font-size: 1.2em;
            }

            .feature-card, .example-card {
                padding: 20px;
                border-width: 3px;
            }
        }
    </style>
</head>
<body>
    <div class="deck-container">
        <div class="deck-header">
            <h1>Hey Omi</h1>
            <p>Create professional presentations with AI using voice commands</p>
        </div>

        <div class="deck-features">
            <div class="feature-card">
                <h3>Voice-Activated</h3>
                <p>Simply say "Hey Omi" followed by your presentation request to get started.</p>
            </div>
            <div class="feature-card">
                <h3>AI-Powered Generation</h3>
                <p>Transform your ideas into professional presentations using advanced AI technology.</p>
            </div>
            <div class="feature-card">
                <h3>Smart Templates</h3>
                <p>Choose from a variety of professionally designed templates for different presentation types.</p>
            </div>
        </div>

        <div class="deck-usage">
            <h2>How to Use Deck AI</h2>
            <ul class="usage-steps">
                <li>Start by saying "Hey Omi" to activate the presentation generator</li>
                <li>Describe your presentation topic and requirements</li>
                <li>Wait for the AI to generate your presentation</li>
                <li>Review and download your presentation</li>
            </ul>
        </div>

        <div class="deck-examples">
            <h2>Example Commands</h2>
            <div class="example-card">
                <h3>Basic Presentation</h3>
                <p>Create a simple presentation about a topic:</p>
                <code>"Hey Omi, create a presentation about climate change"</code>
            </div>
            <div class="example-card">
                <h3>Styled Presentation</h3>
                <p>Request a specific style or format:</p>
                <code>"Hey Omi, create a professional presentation about quarterly sales in a business style"</code>
            </div>
            <div class="example-card">
                <h3>Detailed Presentation</h3>
                <p>Include specific sections or points:</p>
                <code>"Hey Omi, create a presentation about marketing strategy including sections on social media, email campaigns, and analytics"</code>
            </div>
        </div>
    </div>
</body>
</html> 